import React from 'react';
import { Link } from 'react-router';

import Menu from 'antd/lib/menu';
import Dropdown from 'antd/lib/dropdown';

import { URL_IMG } from '../config.jsx';

const DropdownButton = Dropdown.Button;

const styles = {
    header: {
        width: "100%",
        height: "6rem",
        backgroundColor: "rgb(66,79,164)"
    },
    leftIcon: {
        marginTop: "0.5rem",
        marginLeft: "0.5rem",
        float: "left",
        width: "1.8rem",
        height: "1.8rem",
        borderRadius: "50%"
    },
    popupMenu: {
        marginLeft: "2.8rem",
        width: "30%",
        fontSize: "1rem",
        paddingTop: "0.7rem"
    },
    layout: {
        height: "3rem"
    },
    rightIcon: {
        color: "#fff",
        position: "absolute",
        top: "0.5rem",
        fontSize: "1.5rem",
        right: "0.5rem"
    },
    rightSearchControl: {
        position: "absolute",
        right: "0rem",
        height: "1.5rem",
        width: "calc( 70% - 3.2rem )",
        top:"0.5rem"
    },
    searchIcon: {
        color: "#fff",
        position: "absolute",
        fontSize: "1.5rem",
        marginLeft:"0.2rem",
        right: "0.5rem"
    },
}

export default class CommonBar extends React.Component {

    constructor(props) {
        super(props);
        this.state={key:""};
    }

    componentDidMount() {
        this.setState({key:this.props.searchText});
    }

    componentWillReceiveProps(nextProps) {
        this.setState({key:nextProps.searchText});
    }

    onInputChange(e) {
        this.setState({
            key:e.target.value
        })
    }

    onBtnSearch() {
        this.props.searchFunc(this.state.key);
    }

    render() {
        const _this = this;
        let channel = '';
        let menuItem = [];
        let img = '';
        let bashImg = URL_IMG.replace('/phenanthrene','');
        if (this.props.channels && this.props.channels.length > 0) {
            this.props.channels.forEach(function (item) {
                menuItem.push(<Menu.Item key={item.ID}><div onClick={() => { _this.props.menuHandler(item.ID) } }>{item.Title}</div></Menu.Item>);
                if (item.ID == _this.props.channel) {
                    channel = item.Title;
                    if (item.ID == -1)
                        img = item.ChannelIconUrl;
                    else 
                        img = bashImg + item.ChannelIconUrl;
                }
            });
        } else {
            menuItem.push(<Menu.Item key={this.props.channel}>Loading...</Menu.Item>);
            channel = 'Loading...';
        }
        const menu = (
            <Menu >
                { menuItem }
            </Menu>
        );
        let topMenu1 = {
            width: "calc(100% / 3)",
            float: "left",
            height: "2rem",
            marginTop: "1rem",
            fontSize: "0.8rem",
            color: "rgb(114,124,174)",
            textAlign: "center"
        };
        let topMenu2 = {
            width: "calc(100% / 3)",
            float: "left",
            height: "2rem",
            marginTop: "1rem",
            fontSize: "0.8rem",
            color: "rgb(114,124,174)",
            textAlign: "center"
        };
        let topMenu3 = {
            width: "calc(100% / 3)",
            float: "left",
            height: "2rem",
            marginTop: "1rem",
            fontSize: "0.8rem",
            color: "rgb(114,124,174)",
            textAlign: "center"
        };

        switch (this.props.sort) {
            case "0":
                topMenu1.borderBottom = "3px solid #fff";
                topMenu1.color = "#fff";
                break;
            case "1":
                topMenu2.borderBottom = "3px solid #fff";
                topMenu2.color = "#fff";
                break;
            case "2":
                topMenu3.borderBottom = "3px solid #fff";
                topMenu3.color = "#fff";
                break;
        }

        return (
            <div style={styles.header} id="commonbar">
                <div style={styles.layout}>
                    <img style={styles.leftIcon} src={img}/>
                    <div id="commonPopupMenu" style={styles.popupMenu}>
                        <Dropdown overlay={menu} trigger={['click']} getPopupContainer={() => document.getElementById('commonPopupMenu') }>
                            <div style={{ color: "#fff", }}>
                                { channel } <i className="fa fa-caret-down" aria-hidden="true"></i>
                            </div>
                        </Dropdown>
                    </div>
                    { this.props.isSearch && <Link to={"searchpage/"+this.props.isSearch+"/1/0"}> <i className="fa fa-search" aria-hidden="true" style={styles.rightIcon}></i></Link>}
                    { 
                        this.props.searchFunc && 
                        <div style={styles.rightSearchControl}>
                            <form onSubmit={(e)=>{e.preventDefault();return false;}} action="">
                            <input  type="search" id="search" name="search" value={this.state.key} onChange={this.onInputChange.bind(this)} style={{outline:"none",width:"calc(100% - 2.5rem)",paddingLeft: "5px"}}/><i onClick={this.onBtnSearch.bind(this)} className="fa fa-search" aria-hidden="true" style={styles.searchIcon}
                            ></i>
                            </form>
                        </div>
                    }
                </div>
                <div style={styles.layout}>
                    <div style={topMenu1} onClick={() => { this.props.sortHandler("0") } }>最新发布</div>
                    <div style={topMenu2} onClick={() => { this.props.sortHandler("1") } }>最热门话题</div>
                    <div style={topMenu3} onClick={() => { this.props.sortHandler("2") } }>最多点评</div>
                </div>
            </div>
        )
    }
}